<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="碧桂园大数据平台" name="keywords" />
    <meta content="碧桂园大数据平台" name="description" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/elementUI/index.css" />
    <link rel="stylesheet" type="text/css" href="css/elementUI/plugins.css" />
</head>
<body>
<div class="cost-page cost-add-page" v-cloak>
    <!--步骤条-->
    <div class="cost-header">
        <ul class="step3">
            <li class="over">目标成本导入校验</li>
            <li class="over">关联产品</li>
            <li class="active">填写政府要求</li>
            <li>评估结果</li>
        </ul>
    </div>

    <!--表单-->
    <div class="cost-main">
        <div class="b_1">
            <div class="cost-main-title fs14 fw c_333">
                <span>政府要求车位配比</span>
                <span class="c_999 pl30">以下带" <span class="c_red">*</span> "号均为必填项，其中浅黄底色单元格支持编辑。</span>
            </div>
            <div class="bg_white p20 bt_1">
                <el-table :data="parkingData" size="small" border max-height="240px"
                          :cell-class-name="tableCellClassName"
                          :summary-method="getSummaries"
                          show-summary>
                    <el-table-column prop="name" label="投资版产品" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="calc" label="计算基础" header-align="center" align="center">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.calcType" clearable size="mini" placeholder="" @change="calcParkNum(scope.row)">
                                <el-option
                                        v-for="item in calcTypeList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="area" label="面积/户数" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="proportion" label="政府要求配比" header-align="center" align="center">
                        <template slot="header" slot-scope="scope">
                            <i class="c_red pr05">*</i>政府要求配比
                        </template>
                        <template slot-scope="scope">
                            100: <el-input v-model="scope.row.proportion" @blur="calcParkNum(scope.row)" size="mini" class="dis-inline" style="width: 100px;"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="parkNum" label="应建车位个数" header-align="center" align="center"></el-table-column>
                </el-table>
            </div>
        </div>
    </div>

    <!--底部按钮-->
    <div class="cost-footer">
        <el-button @click="goToBeforeStep()">上一步</el-button>
        <el-button type="primary" @click="saveToDraft()">存草稿</el-button>
        <el-button type="primary" @click="goToNextStep()">下一步</el-button>
        <el-button>退出</el-button>
    </div>

    <!--草稿箱-->
    <div class="cost-draft" @click="draftDialogVisible = true">
        <img src="./images/cost/icon-draft.png"/>
        <div class="pt10">草稿箱</div>
    </div>
    <draft-plugins v-if="draftDialogVisible"></draft-plugins>
</div>
</body>
<script src="js/common/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/vue/vue-dev.js" type="text/javascript"></script>
<script src="js/elementUI/index.js" type="text/javascript"></script>
<script src="js/common/main.js" type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '.cost-add-page',
        data() {
            return {
                calcTypeList: [
                    {label: '计容面积', value: '计容面积'},
                    {label: '建筑面积', value: '建筑面积'},
                    {label: '户数', value: '户数'},
                ],
                parkingData: [
                    {name: '投资版产品1', calcType: '', area: '1000', proportion: '', parkNum: ''},
                    {name: '投资版产品2', calcType: '', area: '1000', proportion: '', parkNum: ''},
                    {name: '投资版产品3', calcType: '', area: '1000', proportion: '', parkNum: ''},
                ],
                draftDialogVisible: false,
            }
        },
        methods: {
            calcParkNum (item){
                if(item.calcType && item.proportion){
                    item.parkNum = 123;
                }
            },
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '汇总';
                        return;
                    }
                    if(column.property == 'parkNum'){
                        const values = data.map(item => Number(item[column.property]));
                        if (!values.every(value => isNaN(value))) {
                            sums[index] = values.reduce((prev, curr) => {
                                const value = Number(curr);
                                if (!isNaN(value)) {
                                    return prev + curr;
                                } else {
                                    return prev;
                                }
                            }, 0);
                        } else {
                            sums[index] = '';
                        }
                    }
                });
                return sums;
            },
            tableCellClassName({row, column, rowIndex, columnIndex}){
                if (columnIndex === 3) {
                    return 'bg_yellow';
                }
                return '';
            },
        },
        components: {
            'draft-plugins': draftPlugins
        }
    });
</script>
</html>
